<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询</title>
</head>
<script src="js/vue.global.js"></script>
<body>
<div id="app">
    <table border="1" cellpadding="0" cellspacing="0" width="500" align="center">
        <tbody>
        <tr>
            <th>城市编号</th>
            <th>城市名称</th>
            <th>城市编码</th>
            <th>省份</th>
        </tr>
        <tr v-for="(city, index) in cities" :key="index" align="center">
            <td>{{ city.cityId }}</td>
            <td>{{ city.cityName }}</td>
            <td>{{ city.cityCode }}</td>
            <td>{{ city.province }}</td>

        </tr>
        </tbody>
    </table>
</div>

<script>

    const { createApp,reactive,ref,onMounted } = Vue
    async function listCity(pageNum = 1, pageSize = 10){
        const resource = await fetch('http://localhost:8080/city/list?pageNum=' + pageNum + '&pageSize=' + pageSize)
        if (!resource.ok) {
            throw new Error(resource.status + ' ' + resource.statusText)
        }
        const data = await resource.json()
        return data.data
    }
    const app = createApp({
        setup(){
            let cities = ref([])

            onMounted(async () => {
                const data = await listCity()
                cities.value = data
                console.log(data.value)
            })
            return {
                cities
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>